<template>
    <div style="height: 100%;">
      <el-container style="height: 100%;">
        <el-header>
          <img src="../assets/logo.svg" />
          <span>宜居钦州房产后台管理</span>
        </el-header>
        <el-container>
          <el-aside width="200px">
            <el-row class="tac">
              <el-col>
                <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                  <el-sub-menu index="1">
                    <template #title>
                      <el-icon>
                        <location />
                      </el-icon>
                      <span>Navigator One</span>
                    </template>
                    <el-menu-item-group title="Group One">
                      <el-menu-item index="1-1">item one</el-menu-item>
                      <el-menu-item index="1-2">item two</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="Group Two">
                      <el-menu-item index="1-3">item three</el-menu-item>
                    </el-menu-item-group>
                    <el-sub-menu index="1-4">
                      <template #title>item four</template>
                      <el-menu-item index="1-4-1">item one</el-menu-item>
                    </el-sub-menu>
                  </el-sub-menu>
                  <el-menu-item index="2">
                    <el-icon><icon-menu /></el-icon>
                    <span>Navigator Two</span>
                  </el-menu-item>
                  <el-menu-item index="3" disabled>
                    <el-icon>
                      <document />
                    </el-icon>
                    <span>Navigator Three</span>
                  </el-menu-item>
                  <el-menu-item index="4">
                    <el-icon>
                      <setting />
                    </el-icon>
                    <span>Navigator Four</span>
                  </el-menu-item>
                </el-menu>
              </el-col>
            </el-row>
          </el-aside>
          <el-container>
            <el-main>Main</el-main>
            <el-footer>Footer</el-footer>
          </el-container>
        </el-container>
      </el-container>
    </div>
  </template>
  
  <script setup lang="ts">
    import {
      Document,
      Menu as IconMenu,
      Location,
      Setting,
    } from '@element-plus/icons-vue'
  
    const handleOpen = (key: string, keyPath: string[]) => {
      console.log(key, keyPath)
    }
  
    const handleClose = (key: string, keyPath: string[]) => {
      console.log(key, keyPath)
    }
  </script>
  
  <style scoped>
  .el-header {
    background-color: #001529;
    color: white;
    display: flex;
    align-items: center;
  }
  
  .el-header span {
    font-size: 1.1em;
    font-weight: bold;
    margin-left: 10px;
  }
  
  .el-aside {
    background-color: #ffffff;
  }
  
  .el-container {
    background-color: #f0f2f5;
  }
  
  </style>
  